<template>
	<div class="details">
		<div class="rescueInfo">
			<div class="init">
				<p>救援单号：<span>{{detaData.uuid}}</span></p>
				<p>救援类型：<span>{{detaData.rangeId | Rescue}}</span></p>
				<p>呼救时间：<span>{{detaData.createDate}}</span></p>
			</div>
			<div class="rescueBtn">
				<router-link tag='div' to='progress' class="progress">救援进展</router-link>
				<div class="cancel" v-if="detaData.stateId == 0">取消订单</div>
			</div>
		</div>
		<div class="rescueDetails">
			<div class="tit">
				<img src="" alt="">
				<div class="r">
					<h3>{{detaData.office.name}}<span>正在施救</span></h3>
					<p>接单时间：<span>2018-03-06 08:50:33</span></p>
				</div>
			</div>
			<div class="content">
				<ul>
					<li>
						<i class="iconfont icon-icon-test"></i>
						<p>
							<b>所需物品</b>
							<span>客户要求带足够的汽油和汽车抛锚设备</span>
						</p>
					</li>
					<li>
						<i class="iconfont icon-dingdan2"></i>
						<p>
							<b>详情</b>
							<span>客户要求带足够的汽油和汽车抛锚设备</span>
						</p>
					</li>
					<li>
						<i class="iconfont icon-gantanhao"></i>
						<p>
							<b>备注</b>
							<span>客户要求带足够的汽油和汽车抛锚设备</span>
						</p>
					</li>
				</ul>
				<router-link to="/rescue/map" @click="enterMap" tag='div' class="map">
				<!-- <div class="map"> -->
					<i class="iconfont icon-weizhi"></i>
					<span>郑州市杨金路河南外包产业园天亨J座城市房价阿萨德进口发动机和放大观看</span>
					<b>20.33km</b>
				<!-- </div> -->
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
import { getStore } from '../../../../../config/mUtils'
export default {
	data(){
		return {
			detaData:[]
		}
	},
	methods:{
		enterMap(){
			sessionStorage.lngLat = this.detaData.jingwei
		}
	},
	created(){
		this.detaData = getStore('viewCurrentData')
		console.log(this.detaData)
	}
}
</script>

<style lang="scss" scoped>
@import '../../../../../assets/css/all';

.details{@include screen;z-index: 11;
	.rescueInfo{background-color: white;position: relative;padding:15px;font-size: 13px;
		.init p{line-height: 26px;}
		.rescueBtn{position: absolute;right:15px;top:50%;transform: translateY(-50%);
			div{padding:6px 11px;border:1px solid #333;border-radius: 3px;}
			div + div{margin-top:10px;}
		}
	}
	.rescueDetails{margin:15px 0;background-color: white;
		.tit{display: flex;align-items:center;padding:15px 0;
			img{@include wh(70px,70px);display: block;margin:0 15px;}
			.r{flex: 1;margin-right:15px;
				h3{font-weight: normal;font-size:14px;
					span{float:right;color:$red;}
				}
				p{margin-top:15px;color:#838282;}
			}
		}
		.content{
			ul{
				li{border-top:1px solid #f0f0f0;padding:13px;display: flex;
					i{color:$red;}
					p{margin-left:11px;
					b{font-weight: normal;}
						span{display: block;color:#8B8B8B;margin-top:4px;}
					}
				}
			}
			.map{border-top:1px solid #f0f0f0;line-height: 40px;display:flex;justify-content: space-between;padding:0 15px;
				span{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
				b{font-weight: normal;}
			}
		}
	}
}
</style>

